<template>
  <el-dialog
    v-model="showDialog"
    :title="title"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="90%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    destroy-on-close
    align-center
  >
    <el-table v-loading="loading" :data="list.list">
      <el-table-column
        v-for="(column, index) in list.columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        align="center"
      >
        <template #default="scope">
          <el-image
            v-if="column.prop == 'fn_cover'"
            :src="JSON.parse(scope.row.fn_cover.replaceAll('\\', ''))[0].url"
            style="max-width: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column label="资源完整度" prop="complete">
        <template #default="scope">
          <el-text tag="p">{{ scope.row.baseComplete }}</el-text>
          <el-text tag="p">{{ scope.row.processComplete }}</el-text>
          <el-text tag="p">审核未完成</el-text>
        </template>
      </el-table-column>
      <el-table-column :width="300" align="center" label="操作">
        <template #default="scope">
          <router-link :to="{ path: '/housing/book/impResource', query: { id: scope.row.id } }"
            ><el-link type="primary">导入资源</el-link>
          </router-link>
          &nbsp;&nbsp;
          <el-link type="primary" @click="updateResource(scope.row.id)">编辑</el-link>
          &nbsp;&nbsp;
          <el-link type="primary" @click="updateResource(scope.row.id)">查看</el-link>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <!-- 表单弹窗：添加/修改 -->
  <el-dialog
    v-model="showPreviewDialogFlag"
    title="修改图书"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="75%"
    align-center
  >
    <v-form-render
      ref="vFormRef"
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveResource">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from 'element-plus'
import * as metaApi from '@/api/meta'
import request from '@/config/axios'
import { object } from 'vue-types'

const loading = ref(false)
const title = ref('外壳图书列表')
const showDialog = ref(false)

const form = ref({})

const formRef = ref<FormInstance>()

const showPreviewDialogFlag = ref(false)

const vFormRef = ref<any>()

const formJson = ref({
  widgetList: [],
  formConfig: {}
})

const formData = ref({})

const optionData = ref({})

const hid = ref(0)

const list = ref([])

const tableData = ref([])

const updateId = ref(0)

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const getList = async () => {
  queryParams.value.houseId = hid.value
  list.value = await metaApi.selectMetaData(queryParams.value)
  console.log(list.value)
}
const openDialog = (houseId) => {
  showDialog.value = true
  hid.value = houseId
  getList()
}
const closeDialog = () => {
  showDialog.value = false
  form.value = {}
}

const updateResource = async (id) => {
  updateId.value = id
  showPreviewDialogFlag.value = true
  let res = await metaApi.selectMetaDataOne(id)
  // let classify = res.classify
  // console.log(JSON.parse(classify))
  // res.classify = JSON.parse(classify)
  await vFormRef.value.setFormData(res)
}

const selectForm = async () => {
  request
    .get({ url: '/meta/one/42' })
    .then((res) => {
      let f = JSON.parse(res.tableForm)
      formJson.value.widgetList = f.widgetList
      formJson.value.formConfig = f.formConfig
    })
    .catch((error) => {
      console.log(error)
    })
}
const saveResource = async () => {
  let data = await vFormRef.value.getFormData()
  await metaApi.updateMetaData(updateId.value, metaApi.buildVFormData(data))
  getList()
  showPreviewDialogFlag.value = false
}

defineExpose({
  openDialog
})
onMounted(() => {
  selectForm()
})
</script>
